<template>
    <footer>
        <ul class="list-unstyled text-center">
            <li><a href="../mobile-about.html?version=1">關於我們</a></li>
            <li><a href="../mobile-feedback.html?version=1">意見反饋</a></li>
            <li><a href="../api.php?module=mobile&action=tosite">電腦版</a></li>
        </ul>
        <p>Copyright ©2007-2017 by addcn technology Co.,L.td.</p>
        <p>All Rights reserved</p>
        <!-- 回到頂部 -->
        <div @click="toTop" class="top" ref="top">
            <span class="glyphicon glyphicon-menu-up"></span>            
        </div>
    </footer>
</template>

<script>
    export default{
        name: 'bottom',
        mounted(){
            let init = _ => {
                // 回到頂部
                if( document.body.scrollTop > 300 ){
                    this.$refs.top.style.display = "block";
                }else{
                    this.$refs.top.style.display = "none";                    
                }
            }
            window.addEventListener( 'scroll', init, false )
        },
        methods:{
            toTop(){
                var speed = document.body.scrollTop / 100;
                var timer = setInterval( function(){
                    document.body.scrollTop = document.body.scrollTop - speed
                    if ( document.body.scrollTop <= 0 ) {
                        document.body.scrollTop = 0
                        clearInterval( timer )
                    }
                }, 5 )
            }
        }
    }
</script>

<style scoped>
    ul{
        display: flex;
        padding: .3rem 0 .25rem;
        margin: 0;
    }
    li{
        width: 2.5rem;
        text-align: center;
        border-right: 1px solid #d9d9d9;
        font-size: .24rem;
        height: .3rem;
    }
    li a{
        color: #999;
        text-decoration: none;
    }
    li:last-child{
        border-right: none;
    }
    p{
        font-size: .2rem;
        color: #ccc;
        text-align: center;
        margin-bottom: 0;
    }
    .top{
        position: fixed;
        right: .2rem;
        bottom: .5rem;
        width: .7rem;
        height: .7rem;
        text-align: center;
        vertical-align: middle;
        background-color: #333;
        color: white;
        border-radius: .1rem;
        font-size: .32rem;
        z-index: 100;
        opacity: .9;
        display: none;
        cursor: pointer;
    }
    .top span{
        line-height: .7rem;
    }
</style>
